<template>
  <div class="page-container">
    <div>
      <span class="label-title">选择审核中产品：</span>
      <el-select v-model="id" @change="changeHandle">
        <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </div>
    <Step3
      :status="status"
      @reason="showReason"
      @cancel="cancelHandle"
      @resubmit="reSubmit"
    />
    <Reject
      v-if="showReject"
      :reject-form="rejectForm"
      @close="closeHandle"
    />
  </div>
</template>

<script>
import { getApproveDetail, rollProductBack } from '@/api/common'
import { getApproveList } from '@/api/product'
import { mapGetters } from 'vuex'
import Step3 from '@/views/shop/creatProduct/common/Step3.vue'
import Reject from '@/components/Approve/Reject.vue'
export default {
  name: 'ProductApprove',
  components: {
    Step3,
    Reject
  },
  data() {
    return {
      pageType: '',
      id: '',
      status: '',
      type: '',
      productList: [],
      showReject: false,
      rejectForm: {}
    }
  },

  computed: {
    ...mapGetters([
      'currentSite'
    ])
  },

  created() {
    this.pageType = this.$route.query.pageType
    this.getProductList()
  },

  methods: {
    // 获取列表
    getProductList() {
      const data = {
        siteId: this.currentSite.id
      }
      getApproveList(data).then(res => {
        this.productList = res || []
      }).catch(() => {})
    },

    // 选择产品
    changeHandle(id) {
      const item = this.productList.find(item => item.id === id)
      this.type = item.type
      const data = {
        productId: id
      }
      getApproveDetail(data).then(res => {
        const { approveStatus, rejectReason, rejectFileUrl } = res
        this.status = approveStatus
        this.rejectForm = {
          rejectReason,
          rejectFileUrl
        }
      }).catch(() => {})
    },

    // 撤销发布
    cancelHandle() {
      const data = {
        productId: this.id
      }
      this.$confirm('确定要撤销发布吗?', '提示', {
        type: 'warning'
      }).then(() => {
        rollProductBack(data).then(() => {
          this.$message.success('撤销发布成功')
          window.location.reload()
        }).catch(() => {})
      }).catch(() => {})
    },

    // 重新提交
    reSubmit() {
      const path = '/shop/creatProduct'
      const query = {
        id: this.id,
        source: 'edit'
      }
      if (this.pageType) {
        query.type = this.type
      }
      this.$router.push({
        path,
        query
      })
    },

    // 展示原因
    showReason() {
      this.showReject = true
    },

    // 关闭
    closeHandle() {
      this.showReject = false
    }
  }
}
</script>

<style lang="scss" scoped>
.label-title{
  margin-right: 10px;
}
</style>
